@use "../mixins/eui";

.euiButton,
.euiCollapsibleNav,
.euiHeaderSectionItem__button {
  backface-visibility: hidden;
}

.euiFormControlLayout--compressed {
  height: 33px !important;
}

.formFooterBar {
  position: absolute;
  bottom: 0;
  // background: var(--browserTableRowEven);
  border-style: solid;
  border-width: 0;
  border-color: var(--euiColorLightShade);
  border-top-width: 1px;
  width: 100%;

  z-index: 2;

  max-height: 100%;
  @include eui.scrollBar;
  overflow-y: auto;

  &.contentActive {
    border-color: var(--euiColorPrimary) !important;
    border-bottom-width: 1px !important;
  }
}

.euiRadio .euiRadio__circle,
.euiCheckbox .euiCheckbox__square {
  border-width: 2px !important;
}

.euiFieldText,
.euiFieldNumber,
.euiSelect,
.euiSuperSelectControl,
.euiComboBox .euiComboBox__inputWrap {
  background-color: var(--euiColorEmptyShade) !important;
  max-width: 100% !important;
  border: 1px solid var(--controlsBorderColor) !important;
  box-shadow: none !important;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.14px;
}

.euiFormHelpText {
  padding-top: 2px;
}

.euiFormControlLayout--group {
  box-shadow: none !important;
  border: 1px solid var(--controlsBorderColor);
  padding: 0 !important;
}

.euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label,
.euiRadio .euiRadio__input ~ .euiRadio__label {
  color: var(--controlsLabelColor);
}

.euiCheckbox .euiCheckbox__input + .euiCheckbox__square,
.euiRadio .euiRadio__input + .euiRadio__circle {
  border-color: var(--iconsDefaultColor) !important;
  background-color: var(--euiColorEmptyShade) !important;
  &:hover {
    background-color: var(--euiColorEmptyShade) !important;
    border-color: var(--iconsDefaultHoverColor) !important;
  }
}

.euiRadio .euiRadio__input:checked + .euiRadio__circle,
.euiCheckbox .euiCheckbox__input:checked + .euiCheckbox__square {
  border-color: var(--euiColorPrimary) !important;
}

.euiRadio:hover,
.euiCheckbox:hover {
  .euiRadio__label,
  .euiCheckbox__label {
    transition: color 150ms ease-in;
    color: var(--controlsLabelHoverColor) !important;
  }
}
.euiCheckbox .euiCheckbox__input:checked ~ .euiCheckbox__label,
.euiRadio .euiRadio__input:checked ~ .euiRadio__label {
  color: var(--controlsLabelHoverColor) !important;
}

.euiRadio:hover .euiRadio__circle,
.euiRadio:hover .euiCheckbox__square,
.euiCheckbox:hover .euiRadio__circle,
.euiCheckbox:hover .euiCheckbox__square {
  border-color: var(--iconsDefaultHoverColor) !important;
}

.euiCheckbox .euiCheckbox__input:checked + .euiCheckbox__square {
  border-color: var(--euiColorPrimary) !important;
  background-color: var(--euiColorPrimary) !important;
}

.theme_DARK {
  .euiCheckbox .euiCheckbox__input:checked + .euiCheckbox__square {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M.375 2.625L3.375 5.625M3.375 5.625L8.625.375' fill='none' fill-rule='evenodd' stroke='rgb%2832, 32, 32%29' stroke-linecap='round' stroke-width='1.5' transform='translate(.5 1)'/%3E%3C/svg%3E") !important;
  }
}

.theme_LIGHT {
  .euiCheckbox .euiCheckbox__input:checked + .euiCheckbox__square {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M.375 2.625L3.375 5.625M3.375 5.625L8.625.375' fill='none' fill-rule='evenodd' stroke='rgb%28255, 255, 255%29' stroke-linecap='round' stroke-width='1.5' transform='translate(.5 1)'/%3E%3C/svg%3E") !important;
  }
}

.inlineFieldsNoSpace {
  .euiFlexGroup {
    .euiFlexItem:not(:first-child) {
      .euiFieldText,
      .euiFormControlLayout--group,
      .euiSuperSelectControl {
        border-left: 0 !important;
      }
    }
  }
}

.euiComboBox .euiComboBox__inputWrap {
  padding-top: 5px !important;
  padding-left: 8px !important;
  min-height: 43px !important;
  .euiBadge {
    background-color: var(--comboBoxBadgeBgColor);
    color: var(--euiTextSubduedColor);
    border: 0;
  }

  .euiBadge__text {
    line-height: 20px;
  }

  .euiComboBoxPlaceholder {
    color: var(--inputPlaceholderColor) !important;
  }
}

.euiSuperSelectControl:focus,
.euiFieldNumber:focus,
.euiFieldText:focus {
  background-image: linear-gradient(
    to top,
    var(--euiColorPrimary),
    var(--euiColorPrimary) 2px,
    transparent 2px,
    transparent 100%
  ) !important;
}
